<template>
	<view class="container">
			<view class="image-top">
				<image src="/static/henan-15/t.png" style="width: 750rpx" mode="widthFix"></image>
			</view>
			<view class="form-container">
				<uni-forms class="login-form" ref="accountForm" :model="formData" :rules="accountRules">
					<uni-forms-item>
						<input placeholder="请输入手机号	" type="tel" maxlength="11" v-model="formData.mobile" class="uni-input-input" placeholder-style="color: #818181" />
					</uni-forms-item>

					<view class="login-btn" style="text-align: center">
						<image src="/static/btn.png" mode="" style="width: 640rpx; height: 110rpx" @click="sureOrder"></image>
					</view>
				</uni-forms>
			</view>
			<view class="image-bottom">
				<image src="/static/henan-15/b.png" style="width: 750rpx" mode="widthFix"></image>
			</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="confirm">
				<view class="dialog-con">
					<view class="send-code">
						<input
							style="width: 350rpx"
							type="tel"
							adjust-position="false"
							maxlength="6"
							v-model="formData.smsCode"
							placeholder="请输入验证码"
							class="uni-input-input"
							placeholder-style="color: #818181"
						/>
						<view class="code-line"></view>
						<view class="code" @click="sendCode">获取验证码</view>
					</view>
					<image src="/static/henan-15/sure/bg.png" style="width: 660rpx" mode="widthFix"></image>
				</view>
				<view class="btn-con">
					<view class="btn-cancel">
						<image src="/static/henan-15/sure/cancel.png" style="width: 330rpx" mode="widthFix" @click="cancel"></image>
					</view>
					<view class="btn-ok">
						<image src="/static/henan-15/sure/ok.png" style="width: 330rpx" mode="widthFix" @click="confirmOrder"></image>
					</view>
				</view>
				<view class="btn-close">
					<image src="/static/henan-15/sure/icom.png" style="width: 85rpx; height: 85rpx" mode="" @click="cancel"></image>
				</view>
			</view>
		</uni-popup>
		<view class="arrive-btn" :style="{ display: showHeight>500 ? '' : 'none' }">
			<image src="/static/btn.png" mode="" style="width: 640rpx; height: 110rpx" @click="toTop"></image>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref,onMounted ,watchEffect,watch} from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
const isSend = ref(false);
const isNum = ref(0);
const isTimer = ref();
const showHeight=ref(0)
const accountForm = ref();
const popup = ref();
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});
onLoad((query) => {
	if(!query.a || !query.p){
		uni.reLaunch({
			url:'/pages/clb/404'
		})
	}
	formData.channelCode = query.a;
	formData.productCode = query.p;
});

watch(
	() => formData.mobile,
	(newVal, oldValue) => {
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
		if (isOkMobile) {
			uni.hideKeyboard();
			// sendCode();
		}
	}
);
onPageScroll((e) => {
	showHeight.value = e.scrollTop
});
const toTop=()=>{
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
}

const accountRules = reactive({
	mobile: {
		rules: [
			{ required: true, errorMessage: '请输入手机号码' },
			{ pattern: /^1[3-9][0-9]\d{8}$/, errorMessage: '手机号码格式不正确' }
		]
	}
});

const confirmOrder = async () => {
	try {
		if (!formData.smsCode) return uni.utils.toast('请输入验证码');
		if (!formData.mobile) return uni.utils.toast('请输入手机号');
		if (!formData.orderNo) return uni.utils.toast('订单号为空 请输入正确信息');
		const arr = {
			orderNo: formData.orderNo,
			mobile: formData.mobile,
			smsCode: formData.smsCode,
		};
		const res = await initApi.processInventoryPackageOrder(arr);
		// 
		if (res.code != 20000) return uni.utils.toast(res.message);
		cancel();
		clearInterval(isTimer.value);
		isNum.value = 0;
		isSend.value = false;
		return uni.utils.toast('订购成功');
	} catch (e) {
		//TODO handle the exception
	}
};
const sendCode = async () => {
	if (isSend.value) return;
	try {
		const arr = {
			mobile: formData.mobile,
			channelCode: formData.channelCode,
			productCode: formData.productCode
		};

		const res = await initApi.initInventoryPackageOrder(arr);
		if (res.code != 20000) return uni.utils.toast(res.message);
		formData.orderNo = res.data.orderNo;
		isNum.value = 60;
		isSend.value = true;

		isTimer.value = setInterval(() => {
			if (isNum.value <= 0) {
				clearInterval(isTimer.value);
				isNum.value = 0;
				isSend.value = false;
			}
			isNum.value--;
		}, 1000);
		return uni.utils.toast('验证码发送成功');
	} catch (e) {
		//TODO handle the exception
		uni.utils.toast('请输入正确手机号');
		isSend.value = false;
		isNum.value = 0;
		clearInterval(isTimer.value);
	}
};

const cancel = () => {
	popup.value.close();
};
const sureOrder = async () => {
	try {
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(formData.mobile);
		if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');
		popup.value.open('center');
	} catch (e) {
		uni.utils.toast('请输入手机号码');
	}
};
</script>

<style lang="scss" scoped>
.arrive-btn {
	position: fixed;
	bottom: 20rpx;
	width: 750rpx;
	text-align: center;
}
.confirm {
	.btn-con {
		margin-top: 80rpx;
		display: flex !important;
		justify-content: center;
	}
	.btn-close {
		margin-top: 70rpx;
		text-align: center;
	}
	.dialog-con {
		position: relative;
		.send-code {
			position: absolute;
			width: 610rpx;
			height: 70rpx;
			top: 210rpx;
			z-index: 100;
			display: flex;
			height: 80rpx;
			border: 2rpx solid #fe374f;
			margin-left: 22rpx;
			border-radius: 100rpx;
			.uni-input-input {
				width: 360rpx;
				margin-left: 50rpx;
			}
			.code-line {
				height: 50rpx;
				width: 2rpx;
				border-left: 2rpx #7a7a7a solid;
				margin-top: 15rpx;
				margin-right: 6rpx;
			}
			.code {
				height: 80rpx;
				width: 240rpx;
				line-height: 80rpx;
				color: #4b5ae5;
				font-size: 32rpx;
				cursor: pointer;
				margin-left: 10rpx;
			}
		}
	}
}
.form-container {
	margin: 0 auto;
	height: 400rpx;
	width: 750rpx;
	
	.login-btn {
		margin-top: 60rpx;
		animation: scaleUp 2s infinite;
		/* 动画名称、持续时间、是否无限循环 */
	}
	@keyframes scaleUp {
		0%,
		50% {
			transform: scale(1); /* 开始时的缩放比例 */
		}
		25%,
		75% {
			transform: scale(1.05); /* 缩放比例最大值 */
		}
		100% {
			transform: scale(1); /* 结束时的缩放比例 */
		}
	}
	.uni-forms-item {
		height: 100rpx;
		margin: 0 29rpx;
		background-color: #ffffff;
		border-radius: 100rpx;
		box-sizing: border-box;
		width: 692rpx;

		.uni-input-input {
			width: 592rpx;
			margin-left: 50rpx;
		}
	}
	::v-deep .uni-forms-item__error {
		width: 100%;
		padding-top: 10rpx;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		transition: none;
	}
}
.container {
	height: 100%;
	overflow: scroll;
	width: 750rpx;
	margin: 0 auto;
	background-color: #cd1d28;
	box-sizing: border-box;
	overflow-x: hidden;
}
::v-deep {
	image {
		vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
	}
}
</style>
